<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-button type="primary" @click="AddClick()">添加</el-button>
				<!-- <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="fy.textarea1"
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
			</div>
			<el-table :data="memberLevelList" border>
				<el-table-column prop="levelName" label="级别名称" />
				<el-table-column prop="actualPerformance" label="总业绩（元）" />
				<el-table-column prop="selfBuying" label="自购（元）" />
				<!-- <el-table-column
          prop="transductivePerformance"
          label="直推业绩（元）"
        /> -->
				<!-- <el-table-column prop="wipeMaxTransductive" label="抹除最大直推(个)" />
        <el-table-column
          prop="wipeMaxTransductiveResidue"
          label="抹除最大直推剩余元数"
        />
        <el-table-column prop="wipeMinTransductive" label="抹除最小直推(个)" />
        <el-table-column
          prop="wipeMinTransductiveResidue"
          label="抹除最小直推剩余元数"
        /> -->
				<!-- <el-table-column prop="groupPerformance" label="团队业绩（元）" /> -->
				<!-- <el-table-column prop="wipeMaxGroup" label="抹除最大团队(个)" />
        <el-table-column
          prop="wipeMaxGroupResidue"
          label="抹除最大团队剩余元数"
        />
        <el-table-column prop="wipeMinGroup" label="抹除最小团队(个)" />
        <el-table-column
          prop="wipeMinGroupResidue"
          label="抹除最小团队剩余元数"
        /> -->
				<!-- <el-table-column label="下级">
          <template slot-scope="scope">
            <span>{{ scope.row.severals }}个</span>
            <span>{{ scope.row.severalLevels }}级</span>
          </template>
        </el-table-column> -->
				<el-table-column prop="proportion" label="团队收益分成" />
				<el-table-column prop="createBy" label="创建人" />
				<!-- <el-table-column prop="createTime" label="创建时间" /> -->
				<el-table-column prop="updateBy" label="修改人" />
				<!-- <el-table-column prop="updateTime" label="修改时间" /> -->
				<el-table-column label="操作" width="150px">
					<template slot-scope="scope" v-if="scope.row.id != 0">
						<div class="button">
							<el-button type="primary" size="mini" @click="UpdateClick(scope.row)">修改</el-button>
							<el-button type="danger" size="mini" @click="DelClick(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-form label-position="left" label-width="80px" :model="ObjectList">
					<el-form-item label="级别名称">
						<el-input placeholder="请输入级别名称" v-model="ObjectList.levelName"></el-input>
					</el-form-item>
					<el-form-item label="总业绩（元）">
						<el-input placeholder="请输入总业绩（元）" v-model="ObjectList.actualPerformance"></el-input>
					</el-form-item>
					<el-form-item label="自购（元）">
						<el-input placeholder="请输入自购（元）" v-model="ObjectList.selfBuying"></el-input>
					</el-form-item>
					<!-- <el-form-item label="直推业绩（元）">
            <el-input
              placeholder="请输入直推业绩（元）"
              v-model="ObjectList.transductivePerformance"
            ></el-input>
          </el-form-item> -->
					<!-- <el-form-item label="抹除最大直推?个">
            <el-input
              placeholder="请输入抹除最大直推?个"
              v-model="ObjectList.wipeMaxTransductive"
            ></el-input>
          </el-form-item>
          <el-form-item label="抹除最大直推?个剩余">
            <el-input
              placeholder="(元)"
              v-model="ObjectList.wipeMaxTransductiveResidue"
            ></el-input>
          </el-form-item>
          <el-form-item label="抹除最小直推?个">
            <el-input
              placeholder="请输入抹除最小直推?个"
              v-model="ObjectList.wipeMinTransductive"
            ></el-input>
          </el-form-item>
          <el-form-item label="抹除最小直推?个剩余">
            <el-input
              placeholder="(元)"
              v-model="ObjectList.wipeMinTransductiveResidue"
            ></el-input>
          </el-form-item> -->
					<!-- <el-form-item label="团队业绩（元）">
            <el-input
              placeholder="请输入团队业绩（元）"
              v-model="ObjectList.groupPerformance"
            ></el-input>
          </el-form-item> -->
					<!-- <el-form-item label="抹除最大团队?个">
            <el-input
              placeholder="请输入抹除最大团队?个"
              v-model="ObjectList.wipeMaxGroup"
            ></el-input>
          </el-form-item>
          <el-form-item label="抹除最大团队?个剩余">
            <el-input
              placeholder="(元)"
              v-model="ObjectList.wipeMaxGroupResidue"
            ></el-input>
          </el-form-item>
          <el-form-item label="抹除最小团队?个">
            <el-input
              placeholder="请输入抹除最小团队?个"
              v-model="ObjectList.wipeMinGroup"
            ></el-input>
          </el-form-item>
          <el-form-item label="抹除最小团队?个剩余">
            <el-input
              placeholder="(元)"
              v-model="ObjectList.wipeMinGroupResidue"
            ></el-input>
          </el-form-item> -->
					<div class="jgjj">
						<el-form-item label="几个">
							<el-input class="jgin" placeholder="请输入几个" v-model="ObjectList.severals"></el-input>
						</el-form-item>
						<el-form-item label="几级">
							<el-input class="jjin" placeholder="请输入几级" v-model="ObjectList.severalLevels"></el-input>
						</el-form-item>
					</div>
					<el-form-item label="团队分成">
						<el-input placeholder="请输入团队分成" v-model="ObjectList.proportion"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="ClickUser()">确 定</el-button>
				</span>
			</el-dialog>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import {
		timestampToTime
	} from "@/utils/date";
	import * as MemberLevelApi from "@/api/Search";
	import * as syMemberApi from "@/api/Add";
	export default {
		data() {
			return {
				memberLevelList: [],
				timestampToTime,
				total: 0,
				fy: {
					size: 10,
					current: 1,
				},
				ObjectList: {},
				dialogVisible: false,
				title: "",
			};
		},
		methods: {
			DelClick(row) {
				syMemberApi.DelMemberLev({
					idList: row.id
				}).then((res) => {
					if (res.data == true) {
						this.dialogVisible = false;
						this.SearchData();
						this.$notify({
							title: "成功",
							message: "删除成功",
							type: "success",
						});
					} else {
						this.dialogVisible = false;
						this.SearchData();
						this.$notify({
							title: "失败",
							message: "删除失败",
							type: "error",
						});
					}
				});
			},
			UpdateClick(row) {
				this.title = "修改团队等级管理";
				syMemberApi.UpdateMemberLevID({
					id: row.id
				}).then((res) => {
					let params = res.data
					this.ObjectList = {
						levelName: params.levelName,
						actualPerformance: params.actualPerformance,
						selfBuying: params.selfBuying,
						severals: params.severals,
						severalLevels: params.severalLevels,
						proportion: params.proportion,
						id: params.id
					}
					this.dialogVisible = true;
				});
			},
			ClickUser() {
				if (this.ObjectList.id) {
					syMemberApi.UpdateMemberLev({
						...this.ObjectList,
						token: this.$store.getters.token
					}).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "修改成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "修改失败",
								type: "error",
							});
						}
					});
				} else {
					syMemberApi.AddMemberLevelMan({
						...this.ObjectList,
						token: this.$store.getters.token
					}).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "新增成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "新增失败",
								type: "error",
							});
						}
					});
				}
			},
			AddClick() {
				this.dialogVisible = true;
				this.title = "新增团结等级";
				this.ObjectList = {};
			},
			SearchData() {
				MemberLevelApi.InsertMemberLevel(this.fy).then((res) => {
					this.total = res.data.total;
					let list = res.data.records;
					list = list.map((item) => {
						if (item.id == 0) {
							// item = item.splice(0, 1);
						}
					});
					this.memberLevelList = res.data.records;
					this.memberLevelList.forEach((item) => {
						item.createTime = this.timestampToTime(item.createTime);
						item.updateTime = this.timestampToTime(item.updateTime);
					});
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.el-dialog {
		width: 50%;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 30%;
	}

	.jgin {
		width: 100%;
	}

	.jjin {
		width: 100%;
	}

	.jgjj {
		display: flex;
	}

	.jgjj .el-form-item_content {
		margin-left: 0px;
	}
</style>
